<template>
  <view class="message-page" >
  <navBar></navBar>
    <!-- 消息列表 -->
    <view class="message-list">
      <!-- 文字消息 -->
      <message-container 
        :sender="textMessage.sender"
        :address="textMessage.address"
        :time="textMessage.time"
        :isCollected="textMessage.isCollected"
        @toggleCollect="toggleCollect('text')"
        @onReply="handleReply('text')"
      >
        <text-message :content="textMessage.content" />
      </message-container>
      
      <!-- 图片消息 - 水平滚动 -->
      <message-container 
        :sender="imageMessage.sender"
        :address="imageMessage.address"
        :time="imageMessage.time"
        :isCollected="imageMessage.isCollected"
        @toggleCollect="toggleCollect('image')"
        @onReply="handleReply('image')"
      >
        <image-message :images="imageMessage.images" />
      </message-container>
      
      <!-- 声音消息 -->
      <message-container 
        :sender="audioMessage.sender"
        :address="audioMessage.address"
        :time="audioMessage.time"
        :isCollected="audioMessage.isCollected"
        @toggleCollect="toggleCollect('audio')"
        @onReply="handleReply('audio')"
      >
        <audio-message 
          :audioUrl="audioMessage.audioUrl"
          :duration="audioMessage.duration"
          :title="audioMessage.title"
        />
      </message-container>
      
      <!-- 视频消息 -->
      <message-container 
        :sender="videoMessage.sender"
        :address="videoMessage.address"
        :time="videoMessage.time"
        :isCollected="videoMessage.isCollected"
        @toggleCollect="toggleCollect('video')"
        @onReply="handleReply('video')"
      >
        <video-message 
          :videoUrl="videoMessage.videoUrl"
          :thumbnail="videoMessage.thumbnail"
          :duration="videoMessage.duration"
          :title="videoMessage.title"
        />
      </message-container>
      
      <!-- 商品售卖消息 - 水平滚动 -->
      <message-container 
        :sender="productMessage.sender"
        :address="productMessage.address"
        :time="productMessage.time"
        :isCollected="productMessage.isCollected"
        @toggleCollect="toggleCollect('product')"
        @onReply="handleReply('product')"
      >
        <product-message :products="productMessage.products" />
      </message-container>
      
      <!-- 店铺展示消息 -->
      <message-container 
        :sender="storeMessage.sender"
        :address="storeMessage.address"
        :time="storeMessage.time"
        :isCollected="storeMessage.isCollected"
        @toggleCollect="toggleCollect('store')"
        @onReply="handleReply('store')"
      >
        <store-message :store="storeMessage.store" />
      </message-container>
    </view>
  </view>
</template>

<script>
import MessageContainer from '../../components/MessageContainer.vue'
import TextMessage from '../../components/message-types/TextMessage.vue'
import ImageMessage from '../../components/message-types/ImageMessage.vue'
import AudioMessage from '../../components/message-types/AudioMessage.vue'
import VideoMessage from '../../components/message-types/VideoMessage.vue'
import ProductMessage from '../../components/message-types/ProductMessage.vue'
import StoreMessage from '../../components/message-types/StoreMessage.vue'
import navBar from '../../components/navBar.vue'

export default {

  components: {
    MessageContainer,
    TextMessage,
    ImageMessage,
    AudioMessage,
    VideoMessage,
    ProductMessage,
    StoreMessage,
	navBar
	
  },
  data() {
    return {
   
      // 商品售卖消息
      productMessage: {
        sender: "优品商城",
        address: "杭州市西湖区",
        time: "3小时前",
        products: [
          { 
            id: 1, 
            name: "智能手表", 
            price: 1299, 
            originalPrice: 1599,
            image: "/static/products/watch.jpg",
            sales: 328
          },
          { 
            id: 2, 
            name: "无线耳机", 
            price: 799, 
            originalPrice: 999,
            image: "/static/products/earbuds.jpg",
            sales: 567
          },
          { 
            id: 3, 
            name: "便携式充电宝", 
            price: 199, 
            originalPrice: 299,
            image: "/static/products/powerbank.jpg",
            sales: 1243
          },
          { 
            id: 4, 
            name: "蓝牙音箱", 
            price: 499, 
            originalPrice: 699,
            image: "/static/products/speaker.jpg",
            sales: 289
          }
        ],
        isCollected: false
      }

    };
  },
  methods: {
    // 切换收藏状态
    toggleCollect(type) {
      this[`${type}Message`].isCollected = !this[`${type}Message`].isCollected;
      uni.showToast({
        title: this[`${type}Message`].isCollected ? '收藏成功' : '取消收藏',
        icon: 'none'
      });
    },
    
    // 处理回复
    handleReply(type) {
      uni.showModal({
        title: '回复消息',
        content: `回复${this[`${type}Message`].sender}的消息`,
        placeholderText: '请输入回复内容',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '回复成功',
              icon: 'none'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.message-page {
  background-color: #f5f5f7;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  padding: 30rpx 30rpx 15rpx;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 0 20rpx;
}
</style>
